<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:28
-->
<template>
  <div>柱状图
     <div ref="container" style=" height:250px"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import {get} from '@/utils/request'
export default {
  data() {
    return {
      data:[]
    };
  },
  computed: {},
  methods: {
    async getdata(){
      let res = await get('/dashboard/queryEngineerBindDeviceNumber',{
        page:1,
        pageSize:50
      })
      console.log(res,'柱状图');
      this.data = res.data;
this.loadchart();
    },
    loadchart(){
      const columnPlot = new Column(this.$refs.container, {
data:this.data,
  xField: 'type',
  yField: 'value',
  color:'#ace0f9',
 
  columnWidthRatio: 0.8,
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
      rotate:-43
    },
  },
  yAxis:{
    //  tickInterval:2,
    tickCount:10,
    
  },
  meta: {
    type: {
      alias: '类别',
    },
    value: {
      alias: '工程数量',
    },
  },
});

columnPlot.render();
    }
  },
  created() {},
  mounted() {
    // 
    // this.loadchart();
    this.getdata();                            
  },
};
</script>
<style scoped>
</style>